@import "../../../../less/rockcent";

.advert-box{
  background: white;
  margin-top: 10px;
  img{
    display: block;
  }
  h3{
    color: @gray-light;
    font-weight: normal;
    padding: @panel-heading-padding;
  }
  //4个广告列表项
  .advert-four{
    display: flex;
    flex-direction: row;
    .advert-column{
      display: flex;
      flex-direction: column;
      width: 50%;
      a{
        display: inline-block;
        img{
          width: 100%;
        }
      }
    }
  }

  //  3个广告列表项
  .advert-three{
    display: flex;
    flex-direction: row;
    .advert-row{
      display: flex;
      flex-direction: column;
      width: 60%;
      justify-content: flex-start;
      a{
        display: inline-block;
        border-top: 1px solid @gray-lighter;
        border-right: 1px solid @gray-lighter;
        img{
          width: 50%;
        }
      }
    }
    .advert-column{
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-content: flex-start;
      width: 40%;
      a{
        display: inline-block;
        border-top: 1px solid @gray-lighter;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  //  3个广告列表项(横版)
  .advert-three-column{
    .advert-large{
      width: 100vm;
      overflow: hidden;
      a{
        height: 100%;
        display: block;
        border-top: 1px solid @gray-lighter;
        img{
          width: 50%;
        }
      }
    }
    .advert-row{
      display: flex;
      flex-direction: row;
      width: 100vm;
      overflow: hidden;
      a{
        width: 50%;
        display: block;
        border-top: 1px solid @gray-lighter;
        border-right: 1px solid @gray-lighter;
        &:nth-child(:last-child){
          border-right: none;
        }
        img{
          width: 100%;
        }
      }
    }
  }
}